<template>
	<view class="wrap">


		<view class="confirm-submit">
			<u-button @click="submit" style="border-radius: 12px;background: #3461FD;color: white;">过磅确认</u-button>
		</view>

		<view class="header">
			<view class="header-inner">
				<view class="back-png" @click="backPage">
					<image class="header-image" src="@/static/images/arrow-left.svg" mode="aspectFill"></image>
				</view>
				<view class="title">
					过磅入库
				</view>
				<view></view>
			</view>
		</view>

		<view class="xiangzihao">
			<view class="left">
				关联号
			</view>
			<view class="right">
				GLD20221223-A001
			</view>
		</view>

		<view class="shangjia">
			<view class="main-info">
				<view class="cell">
					<view class="name">
						供应商
					</view>
					<view class="value">
						美卓奥图泰国际贸易（天津）有限公司
					</view>
				</view>
				<view class="cell">
					<view class="name">
						车牌号
					</view>
					<view class="value">
						浙F12345黄
					</view>
				</view>
				<view class="cell">
					<view class="name">
						司机姓名/电话
					</view>
					<view class="value">
						王小五/139****1234
					</view>
				</view>

			</view>
			<view class="split-line"></view>

			<view class="xiangziitem">
				<view class="title">
					要求/预计到港时间
				</view>
				<view class="xiangzi-code">
					2022-12-23 08:00/2022-12-24 08:00
				</view>
				<view class="xiangzi-shuxing">
					<view class="shuxing">
						<view class="name">
							件数
						</view>
						<view class="value">
							12木箱
						</view>
					</view>
					<view class="shuxing">
						<view class="name">
							体积
						</view>
						<view class="value">
							17.08M3
						</view>
					</view>
					<view class="shuxing">
						<view class="name">
							总毛重
						</view>
						<view class="value">
							6202.00Kg
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="xiangziitem xiangzibox" v-for="(item,index)  in 4" :key="index">
			<view class="title">
				一级箱单号
			</view>
			<view class="xiangzi-code">
				NJCK21SB-0797-XS-CJ01-P01
			</view>
			<view class="xiangzi-shuxing">
				<view class="shuxing">
					<view class="name">
						件数
					</view>
					<view class="value">
						12木箱
					</view>
				</view>
				<view class="shuxing">
					<view class="name">
						体积
					</view>
					<view class="value">
						17.08M3
					</view>
				</view>
				<view class="shuxing">
					<view class="name">
						总毛重
					</view>
					<view class="value">
						6202.00Kg
					</view>
				</view>
			</view>

		</view>

		<u-popup class="weight-for-storage-popup" :show="popupShow" mode="bottom" :round="50">
			<view class="popup-main">
				<view class="popup-main-header">
					<view class="title">
						过磅确认
					</view>
					<view class="close" @click="popupShow=false">
						<image class="cancel" src="@/static/images/cancel.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="main-content">
					<view class="cell">
						<view class="key">
							绿色通道
						</view>
						<view class="value">
							<u-switch v-model="form.lstd" activeColor="#3DCAB1"></u-switch>
						</view>
					</view>
					<view class="hr"></view>
					<view class="cell">
						<view class="key">
							过磅净重
						</view>
						<view class="value blue-border">
							120.00kg
						</view>
					</view>
					<view class="hr"></view>
					<view class="cell">
						<view class="key">
							总毛重
						</view>
						<view class="value">
							100.00kg
						</view>
					</view>
					<view class="hr"></view>
					<view class="cell">
						<view class="key">
							重量比
						</view>
						<view class="value">
							120.00%
						</view>
					</view>
					<view class="hr"></view>
					<view class="cell">
						<view class="key">
							附件
						</view>
						<view class="value">
							<view class="add-update">
								<image class="up-btn" src="@/static/images/upload-add.svg" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="popup-footer">
						<view class="rukuqueren">
							入库确认
						</view>
						<view class="tuihui">
							退回物流
						</view>
					</view>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupShow: false,
				form: {
					lstd: true,
				}
			}
		},
		methods: {
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			submit() {
				console.log("xxxxxxxx")
				this.popupShow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: calc(100vh);
		padding-top: 135px;
		overflow-y: scroll;
		background: var(--additional-colors-white, #FFF);
		padding-bottom: 70px;
	}

	.header {
		width: 100%;
		height: 135px;
		flex-shrink: 0;
		border-radius: 0px 0px 30px 30px;
		background: #3461FD;
		position: fixed;
		top: 0;
		z-index: 999;
		padding-top: 60px;

		.header-inner {
			display: flex;
			justify-content: space-between;
			padding: 0 25px;

			.title {
				color: #FFF;
				text-align: center;
				font-size: 18px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 800;
				line-height: 26px;
				letter-spacing: 0.09px;
			}

			.back-png,
			.scan-png {
				width: 24px;
				height: 24px;
				border-radius: 12px;
				text-align: center;
				line-height: 24px;

				.header-image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.xiangzihao {
		width: calc(100vw - 20px);
		height: 50px;
		line-height: 50px;
		border-radius: 10px;
		background: #FFF;
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.10);
		margin: 10px;
		display: flex;
		justify-content: space-between;
		padding: 0 10px;

		.left {
			color: var(--gray-3, #828282);
			text-align: center;
			font-size: 14px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			line-height: inherit;
		}

		.right {
			color: #1278FF;
			text-align: center;
			font-size: 14px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			line-height: inherit;
		}
	}

	.shangjia {
		width: calc(100vw - 20px);
		min-height: 200px;
		flex-shrink: 0;
		border-radius: 16px;
		background: #FFF;
		box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
		margin: 0 auto;
		padding: 20px;

		.main-info {
			.cell {
				display: flex;
				justify-content: space-between;
				line-height: 32px;
				align-items: center;

				.name {
					color: var(--tetriary-text, #9895AB);
					font-size: 12px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 400;
					line-height: inherit;
					letter-spacing: 0.333px;
				}

				.value {
					color: var(--primary-text, #120B3C);
					text-align: right;
					font-size: 14px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 400;
					line-height: inherit;
					letter-spacing: 0.333px;
				}
			}
		}

		.split-line {
			width: 100%;
			height: 0.8px;
			background: #E0E0E0;
			margin: 20px auto;
		}
	}

	.xiangziitem {
		width: 100%;
		background: #FFF;

		.title {
			color: var(--tetriary-text, #9895AB);
			font-size: 10px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0.333px;
		}

		.xiangzi-code {
			color: #3460F9;
			font-size: 12px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			line-height: normal;
			letter-spacing: 0.333px;
		}
	}

	.xiangzibox {
		width: calc(100vw - 20px);
		min-height: 60px;
		border-radius: 16px;
		background: #FFF;
		box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
		margin: 10px auto;
		padding: 20px;
	}

	.xiangzi-shuxing {
		display: flex;
		padding-top: 20px;

		.shuxing {
			flex: 33.3%;

			.name {
				color: var(--tetriary-text, #9895AB);
				font-size: 10px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 400;
				line-height: 20px;
				letter-spacing: 0.333px;
				margin-bottom: 8px;
			}

			.value {
				color: #3461FD;
				font-size: 12px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 400;
				line-height: 20px;
				letter-spacing: 0.333px;
			}
		}
	}

	.confirm-submit {
		position: fixed;
		bottom: 0px;
		padding: 10px;
		width: 100%;
	}


	.popup-main {
		min-height: 320px;
		padding-top: 20px;

		.popup-main-header {
			line-height: 45px;
			text-align: center;
			position: relative;

			.title {
				font-size: 18px;
				font-weight: 700;
			}

			.close {
				position: absolute;
				right: 25px;
				top: 0px;
				bottom: 0px;
				margin: auto;
				font-size: 18px;
				cursor: pointer;

				.cancel {
					width: 30px;
					height: 30px;
				}
			}
		}

		.main-content {
			padding: 20px;
			box-sizing: border-box;
			margin-bottom: 20px;

			.cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				line-height: 55px;

				.key {
					color: #9895AB;
					font-family: PingFang SC;
					font-size: 16px;
					font-style: normal;
					font-weight: 400;
					line-height: inherit;
					letter-spacing: 0.12px;
				}

				.value {
					color: var(--additional-colors-black, #111);
					font-family: PingFang SC;
					font-size: 16px;
					font-style: normal;
					font-weight: 400;
					line-height: inherit;
					letter-spacing: 0.12px;
				}

				.blue-border {
					border-radius: 20px;
					border: 1px solid #3461FD;
					background: #FFF;
					color: #1278FF;
					text-align: center;
					padding: 5px 20px;
					line-height: normal;
					font-size: 17px;
				}
			}

			.hr {
				display: block;
				width: 100%;
				height: 1px;
				background: #E3E7EC;
				margin: 20px 0px;

			}

			.popup-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 55px;
				font-family: PingFang SC;
				font-size: 16px;
				font-style: normal;
				font-weight: 600;

				.rukuqueren {
					width: 194px;
					height: 50px;
					border-radius: 12px;
					background: #3461FD;
					line-height: 50px;
					text-align: center;
					color: white;
				}

				.tuihui {
					width: 117px;
					height: 50px;
					border-radius: 12px;
					background: var(--grayscale-grayscale-30, #E3E9ED);
					line-height: 50px;
					text-align: center;
				}
			}
		}
	}

	.add-update {
		display: flex;
		width: 44px;
		height: 44px;
		padding: 10px;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		border-radius: 12px;
		border: 1px dashed #3461FD;

		.up-btn {
			width: 100%;
			height: 100%;
		}
	}
</style>